<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <img src="./notice.png" alt="">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <!-- 组件标签 -->
        <school></school>
        <hr>
        <hr>
        <!-- 组件标签 -->
        <student></student>
        <hr>
        <hr>
        <hello></hello>
    </div>
</body>
<script>
    // 组件命名
    // 单单词  首字母大写  
    // 多单词   全小写  单词之间需要使用 - 符号 "" 包裹
    // 首字母均大写 脚手架才可用

    // 创建hello组件
    const hello = Vue.extend({
        template: `
        <div>
        <h1>hello! {{name}}</h1>
        </div>
        `,
        data() {
            return {
                name: "mao",
            }
        }
    })

    // 创建school组件
    const school = Vue.extend({
        template: `
        <div>
        <h1>学校名称：{{name}}</h1>
        <h2>学校位于：{{address}}</h2>
        <button @click="show"> 点我显示学校名字</button>
        </div>
        `,
        // el: "#root",  //复用服务  组件下不指定
        data() {
            return {
                name: "SWPU",
                address: "Beijing",
                studentname: "Youzhuan",
            }
        },
        methods: {
            show() {
                console.log("SwPU")
            }
        }
    })

    // 创建student组件
    const student = Vue.extend({
        template: `
        <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生住址：{{address}}</h2>
        <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data() {
            return {
                name: "Youzhuan",
                address: "Beijing",
                age: 18,
            }
        }

    })


    // 注册全局组件
    Vue.component("hello", hello)
    // 创建vm
    new Vue({
        el: "#root",
        // 注册组件 （局部注册）
        components: {
            school: school,
            student: student
        }

    })

</script>

</html>